<template>
  <div class="dataList">
    <el-row :gutter="12">
      <el-col :span="12">
        <el-card
          class="box-card"
          shadow="always"
          v-for="item in dataList"
          :key="item.mod_name"
        >
          <template #header>
            <div class="card-header">
              <p>{{ item.mod_name }}</p>
              <p class="small"><span>imei：</span>{{ item.imei }}</p>
            </div>
          </template>
          <div class="mqttInfo">
            <div class="text item">
              <span>频率：</span>{{ item.frequency || "-" }}
            </div>
            <div class="text item">
              <span>电流：</span>{{ item.intensity || "-" }}
            </div>
            <div class="text item">
              <span>功率：</span>{{ item.power || "-" }}
            </div>
            <div class="text item">
              <span>速度：</span>{{ item.speed || "-" }}
            </div>
            <div class="text item">
              <span>扭矩：</span>{{ item.torque || "-" }}
            </div>
            <div class="text item">
              <span>电压：</span>{{ item.voltage || "-" }}
            </div>
          </div>
          <template #footer>Footer content</template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import equipmentHttp from "@/https/equipment.js";
let dataList = ref([]);
const delay = ref(10 * 1000);
let timer = null;
onMounted(() => {
  getFacilityDetail();
  timer = setInterval(() => {
    getFacilityDetail();
  }, delay.value);
});
const getFacilityDetail = () => {
  equipmentHttp.getFacilityDetail().then((res) => {
    console.log(res.data);
    dataList.value = [];
    if (res.data.code === 200) {
      let keys = Object.keys(res.data.data);
      keys.forEach((item) => {
        dataList.value.push(res.data.data[item]);
      });
      console.log(dataList.value);
    }
  });
};
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped lang="less">
.card-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  font-size: 18px;
  .small {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  width: 33%;
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  span {
    font-size: 14px;
    font-weight: 400;
    color: #333;
  }
}
.mqttInfo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
